<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修仙游戏管理面板</title>
    <link rel="stylesheet" href="../css/xiuxian.css">
</head>

<body>
    <div id="login-container">
        <div id="login-form">
            <h2>修仙游戏管理系统</h2>
            <input type="text" id="username" placeholder="用户名">
            <input type="password" id="password" placeholder="密码">
            <button onclick="login()">登录</button>
        </div>
    </div>
    <div id="app">
        <nav id="sidebar">
            <h1>修仙游戏管理面板</h1>
            <ul>
                <li><a href="#" data-section="users">用户管理</a></li>
                <li><a href="#" data-section="realms">境界管理</a></li>
                <li><a href="#" data-section="monsters">妖怪管理</a></li>
                <li><a href="#" data-section="items">商店物品管理</a></li>
            </ul>
        </nav>
        <main id="content">
            <section id="users" class="hidden">
                <h2>用户管理</h2>
                <ul id="user-list"></ul>
            </section>
            <section id="realms" class="hidden">
                <h2>境界管理</h2>
                <div id="realm-tags"></div>
                <div class="add-realm">
                    <input type="text" id="new-realm" placeholder="新境界名称">
                    <button onclick="addRealm()">+ 新增</button>
                </div>
            </section>
            <section id="monsters" class="hidden">
                <h2>妖怪管理</h2>
                <div id="monster-list"></div>
                <div class="add-monster">
                    <input type="text" id="new-monster-name" placeholder="妖怪名称">
                    <input type="number" id="new-monster-level" placeholder="妖怪等级" min="1">
                    <button onclick="addMonster()">+ 新增</button>
                </div>
            </section>
            <section id="items" class="hidden">
                <h2>商店物品管理</h2>
                <ul id="item-list"></ul>
                <div class="add-item">
                    <input type="text" id="new-item-name" placeholder="物品名称">
                    <input type="number" id="new-item-price" placeholder="物品价格" min="1">
                    <textarea id="new-item-description" placeholder="物品描述"></textarea>
                    <select id="new-item-effect-type">
                        <option value="">选择效果类型</option>
                        <option value="energy">恢复灵力</option>
                        <option value="exp">增加经验</option>
                        <option value="attribute">提升属性</option>
                        <option value="heal">恢复生命</option>
                        <option value="special">特殊效果</option>
                        <option value="buff">临时增益</option>
                    </select>
                    <input type="number" id="new-item-effect-value" placeholder="效果数值" min="1">
                    <input type="text" id="new-item-effect-attribute" placeholder="属性名称">
                    <input type="number" id="new-item-effect-duration" placeholder="持续时间" min="1">
                    <button onclick="addItem()">+ 新增</button>
                </div>
            </section>
        </main>
    </div>
    <div id="item-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h3 id="modal-item-name"></h3>
            <p id="modal-item-price"></p>
            <p id="modal-item-description"></p>
            <p id="modal-item-effect"></p>
            <button id="delete-item-btn" class="delete-item-btn">删除物品</button>
        </div>
    </div>
    <script src="../js/xiuxian.js"></script>
</body>

</html>